<template>
	<d2-container>
		<!-- 页头部分 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="100px" style="height:auto">
				<!-- 说明 -->
				<!-- 一行用一个row -->
				<!-- 每行由若干个col组成 -->
				<!-- 每行所有col的span值加起来，最大不超过24！ -->
				<el-row>
					<el-col :span="8">
						<el-form-item label="仓库名称" prop="storeName">
							<el-input type="text" v-model="queryForm.storeName" placeholder="请输入仓库名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="库区" prop="storeArea">
							<el-select v-model="queryForm.storeArea" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="南宁仓库1" value="0"></el-option>
								<el-option label="南宁仓库2" value="1"></el-option>
								<el-option label="柳州仓库" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="库位" prop="storeVolumn">
							<el-select v-model="queryForm.storeArea" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="满仓" value="0"></el-option>
								<el-option label="半仓" value="1"></el-option>
								<el-option label="XXX" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="创建时间" prop="time">
							<el-date-picker
								v-model="queryForm.time"
								type="datetimeerange"
								range-separator="至"
								start-placeholder="开始日期"
								:picker-options="pickerOptions"
								end-placeholder="结束日期"
								value-format="timestamp"
								style="width: 100%;"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="启用状态" prop="status">
							<el-select v-model="queryForm.status" placeholder="请选择">
								<el-option label="全部" value=""></el-option>
								<el-option label="是" value="1"></el-option>
								<el-option label="否" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<!-- 主体部分 -->
		<template>
			<!-- 表格上方的按钮 -->
			<div class="table-header">
				<el-button type="primary" @click="showDialog = true">新增采购单</el-button>
				<el-button>导出</el-button>
			</div>

			<!-- 表格 -->
			<!-- 表格统一用 带边框、条纹间隔 的样式 -->
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50"></el-table-column>
				<el-table-column label="仓库编号" width="200">111165564634563</el-table-column>
				<el-table-column label="仓库名称" width="160">南宁仓库</el-table-column>
				<el-table-column label="上级仓库" width="160">南宁仓库</el-table-column>
				<el-table-column label="仓库地址">南宁市青秀区东葛路118号</el-table-column>
				<el-table-column label="启用状态" width="100">是</el-table-column>
				<el-table-column label="创建时间" width="180">2021-4-21 12:21:22</el-table-column>
				<el-table-column label="操作" fixed="right" width="220">
					<el-button type="primary" size="small">编辑</el-button>
					<el-button size="small">删除</el-button>
					<el-button type="info" size="small">停用</el-button>
				</el-table-column>
			</el-table>
		</template>

		<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>

		<!-- 弹框 -->
		<template>
			<el-dialog title="弹框" width="60%" :visible.sync="showDialog">
				<div class="form-area">
					<el-form ref="addForm" :model="queryForm" label-width="100px" style="height:auto">
						<el-row>
							<el-col :span="12">
								<el-form-item label="仓库名称" prop="storeName">
									<el-input type="text" v-model="queryForm.storeName" placeholder="请输入仓库名称"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="库区" prop="storeArea">
									<el-select v-model="queryForm.storeArea" placeholder="请选择" style="width: 100%;">
										<el-option label="全部" value=""></el-option>
										<el-option label="南宁仓库1" value="0"></el-option>
										<el-option label="南宁仓库2" value="1"></el-option>
										<el-option label="柳州仓库" value="2"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="仓库名称" prop="storeName">
									<el-input type="text" v-model="queryForm.storeName" placeholder="请输入仓库名称"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="库区" prop="storeArea">
									<el-select v-model="queryForm.storeArea" placeholder="请选择" style="width: 100%;">
										<el-option label="全部" value=""></el-option>
										<el-option label="南宁仓库1" value="0"></el-option>
										<el-option label="南宁仓库2" value="1"></el-option>
										<el-option label="柳州仓库" value="2"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>

				<div class="dialog-footer" slot="footer">
					<el-button type="primary">保存</el-button>
					<el-button @click="showDialog =false">取消</el-button>
				</div>
			</el-dialog>
		</template>
	</d2-container>
</template>

<script>
export default {
  data () {
    return {
      queryForm: {
        storeName: '',
        storeArea: '',
        storeVolumn: '',
        time: '',
        status: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },

	  tableData: [
		  { id: 1 },
		  { id: 2 },
		  { id: 3 },
		  { id: 4 },
		  { id: 5 },
		  { id: 6 },
		  { id: 7 },
		  { id: 8 },
		  { id: 9 }
	  ],
	  currentPage: 1,
	  pageSize: 10,
	  total: 0,

	  showDialog: false
    }
  },
  methods: {
	  submitForm (formName) {

	  },
	  resetForm (formName) {

	  },

	  handleSizeChange (val) {
	    this.pageSize = val
	  },
	  handleCurrentChange (val) {
	    this.currentPage = val
	  }
  }
}
</script>

<style lang="scss" scoped>
	// 样式请务必加scoped

</style>
